<template>
  <div class="ebook-header">
    <span class="ebook-header-text">{{getSectionName}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
  import { ebookMixin } from '../../utils/mixin'
  export default {
    mixins: [ebookMixin]
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  // $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	@mixin left2 {
		display: flex;
		justify-content: flex-start;
		// align-items: center;
	}

  @mixin ellipse {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

  @import "../../assets/styles/global.scss";

  .ebook-header {
    position: absolute;
    top: px2rem(5);
    left: 0;
    z-index: 100;
    width: 100%;
    height: px2rem(25);
    padding: 0 px2rem(10);
    box-sizing: border-box;
    overflow: hidden;
    @include left2;
    .ebook-header-text {
      font-size: px2rem(4);
      color: #6d7178;
      @include ellipse;
    }
  }
</style>
